var getPanelHtml = function () {
    var controler = `<nav class="middle" style="width:25%" aria-label="Page navigation">
                        <ul class="pagination pagination-lg">
                        <li class="previous">
                        <a href="#" name="prev" aria-label="Previous">
                        <span aria-hidden="true">&laquo;</span>
                        </a>
                        </li>
                        <li class="disabled">
                        <a href="javascript:void(0)">
                        <span aria-hidden="true">Page: <span aria-hidden="true" name="page_num"></span> / <span aria-hidden="true" name="page_count"></span></span>
                        </a>
                        </li>
                        <li class="next">
                        <a href="#" name="next" aria-label="Next">
                        <span aria-hidden="true">&raquo;</span>
                        </a>
                        </li>
                        </ul>
                    </nav>`
    var reader = `<canvas class="middle" name="content" style="border:1px solid black;"/>';
    var box = '<div class="panel">
                <div class="panel-heading">
                <h4 class="panel-title">
                <a name="core" class="collapsed" role="button" data-toggle="collapse" data-parent="#accordion"></a>
                </h4>
                </div>
                <div name="sketch" class="panel-collapse collapse">
                <div class="panel-body"></div>
                ${reader}
                ${controler}
                </div>
              </div>`;

    return box;
}

var initContent = function (file, panel) {
    var content = panel.find("[name='content']")[0];
    var prev = panel.find("[name='prev']")[0];
    var next = panel.find("[name='next']")[0];
    var page_num = panel.find("[name='page_num']")[0];
    var page_count = panel.find("[name='page_count']")[0];

    var pdfDoc = null,
        pageNum = 1,
        pageRendering = false,
        pageNumPending = null,
        scale = 1.5,
        canvas = content,
        ctx = canvas.getContext('2d');

    /**
     * Get page info from document, resize canvas accordingly, and render page.
     * @param num Page number.
     */
    function renderPage(num) {
        pageRendering = true;
        // Using promise to fetch the page
        pdfDoc.getPage(num).then(function (page) {
            var viewport = page.getViewport(scale);
            canvas.height = viewport.height;
            canvas.width = viewport.width;

            // Render PDF page into canvas context
            var renderContext = {
                canvasContext: ctx,
                viewport: viewport
            };
            var renderTask = page.render(renderContext);

            // Wait for rendering to finish
            renderTask.promise.then(function () {
                pageRendering = false;
                if (pageNumPending !== null) {
                    // New page rendering is pending
                    renderPage(pageNumPending);
                    pageNumPending = null;
                }
            });
        });

        // Update page counters
        page_num.textContent = pageNum;
    }

    /**
     * If another page rendering in progress, waits until the rendering is
     * finised. Otherwise, executes rendering immediately.
     */
    function queueRenderPage(num) {
        if (pageRendering) {
            pageNumPending = num;
        } else {
            renderPage(num);
        }
    }

    /**
     * Displays previous page.
     */
    function onPrevPage() {
        if (pageNum <= 1) {
            return;
        }
        pageNum--;
        queueRenderPage(pageNum);
    }
    prev.addEventListener('click', onPrevPage);

    /**
     * Displays next page.
     */
    function onNextPage() {
        if (pageNum >= pdfDoc.numPages) {
            return;
        }
        pageNum++;
        queueRenderPage(pageNum);
    }
    next.addEventListener('click', onNextPage);

    /**
     * Asynchronously downloads PDF.
     */
    PDFJS.getDocument({ data: file }).promise.then(function (pdfDoc_) {
        pdfDoc = pdfDoc_;
        page_count.textContent = pdfDoc.numPages;

        // Initial/first page rendering
        renderPage(pageNum);
    });
};

var initPanel = function (html, name, index) {
    var panel = $(html);
    var core = $(panel).find("[name='core']");
    var sketch = $(panel).find("[name='sketch']");
    var content = $(panel).find("[name='content']");
    var formatFile = function (data) {
        if (data.search(/base64,/) !== -1) {
            data = data.replace(/.*?base64,/, function (str) {
                return '';
            });
            data = atob(data);
        }

        return data;
    };

    core.text(name);
    core.bind("click", function () {
        if (!content.data("init")) {
            content.data("init", true);
            $.post('file-get', { index: index }, function (data, success) {
                initContent(formatFile(data.content), panel);
            });
        }
    });
    core.attr('href', '#' + index);
    sketch.attr('id', index);

    return panel;
};

$(document).ready(function () {
    $.get('information-filter', function (data, success) {
        for (var i in data) {
            let taskItem = JSON.parse(data[i].taskItem);
            $('#accordion').append(initPanel(getPanelHtml(), taskItem.description, data[i].index));
        }
    });

    //设置定时更新天气
});

$(document).ready(function () {
    $('.collapse.in').prev('.panel-heading').addClass('active');
    $('#accordion')
        .on('show.bs.collapse', function (a) {
            $(a.target).prev('.panel-heading').addClass('active');
        })
        .on('hide.bs.collapse', function (a) {
            $(a.target).prev('.panel-heading').removeClass('active');
        });
});



